JavaScript Object.assign vs. Spread: Suorituskyvyn vertailu ja käyttötapaukset

JavaScriptissa objektien käsittely on yleinen tehtävä. Kaksi suosittua menetelmää tämän saavuttamiseksi ovat Object.assign() ja spread-syntaksi (...). Vaikka molempia voidaan käyttää ominaisuuksien kopioimiseen yhdestä tai useammasta objektista kohdeobjektiin, ne eroavat toisistaan suorituskyvyn, käyttötapausten ja yleisen toiminnan osalta. Tämä artikkeli tarjoaa kattavan vertailun, joka auttaa sinua valitsemaan oikean työkalun tehtävään.

Object.assign()-metodin ymmärtäminen

Object.assign() on metodi, joka kopioi kaikki lueteltavissa olevat omat ominaisuudet yhdestä tai useammasta lähdeobjektista kohdeobjektiin. Se palauttaa muokatun kohdeobjektin.

Syntaksi:

            Object.assign(target, ...sources)
            

              
                Copy
              
            
          

Esimerkki:

            const target = { a: 1 };
const source = { b: 2, c: 3 };

const returnedTarget = Object.assign(target, source);

console.log(target); // { a: 1, b: 2, c: 3 }
console.log(returnedTarget === target); // true

            

              
                Copy
              
            
          

Tässä esimerkissä ominaisuudet b ja c source-objektista kopioidaan target-objektiin. Object.assign() muokkaa alkuperäistä target-objektia ja palauttaa sen.

Spread-syntaksin ymmärtäminen

Spread-syntaksi (...) mahdollistaa iteroitavan, kuten taulukon tai objektin, laajentamisen paikoissa, joissa odotetaan nollaa tai useampaa argumenttia (funktiokutsuissa), elementtiä (taulukkoliteraaleissa) tai avain-arvo-paria (objektiliteraaleissa).

Syntaksi (objektiliteraali):

            const newObject = { ...object1, ...object2 };
            

              
                Copy
              
            
          

Esimerkki:

            const obj1 = { a: 1 };
const obj2 = { b: 2, c: 3 };

const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj); // { a: 1, b: 2, c: 3 }

            

              
                Copy
              
            
          

Tässä spread-syntaksi luo uuden objektin mergedObj yhdistämällä obj1:n ja obj2:n ominaisuudet.

Suorituskyvyn vertailu

Suorituskykyero Object.assign()-metodin ja spread-syntaksin välillä voi vaihdella JavaScript-moottorista ja käsiteltävien objektien monimutkaisuudesta riippuen. Yleisesti ottaen yksinkertaisessa objektien kloonauksessa ja yhdistämisessä spread-syntaksi on yleensä hieman nopeampi. Ero on kuitenkin usein merkityksetön pienille objekteille. Suuremmille objekteille, monimutkaisemmille skenaarioille ja toistuville operaatioille suositellaan mikro-benchmarkkausta nopeimman lähestymistavan määrittämiseksi omaan käyttötapaukseen. Tarkastellaan eri skenaarioita:

Skenaario 1: Yksinkertainen objektin kloonaus

Yksittäistä objektia kloonattaessa spread-syntaksi osoittaa yleensä parempaa suorituskykyä sen virtaviivaistetumman toiminnan ansiosta.

            const original = { a: 1, b: 2, c: 3 };

// Spread-syntaksi
const cloneSpread = { ...original };

// Object.assign()
const cloneAssign = Object.assign({}, original);

            

              
                Copy
              
            
          

Skenaario 2: Useiden objektien yhdistäminen

Useita objekteja yhdistettäessä suorituskykyero näiden kahden menetelmän välillä on usein minimaalinen, mutta spread-syntaksilla on usein pieni etu, pääasiassa siksi, että se on toteutettu natiivisti moderneissa JavaScript-moottoreissa.

            const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { c: 3 };

// Spread-syntaksi
const mergedSpread = { ...obj1, ...obj2, ...obj3 };

// Object.assign()
const mergedAssign = Object.assign({}, obj1, obj2, obj3);

            

              
                Copy
              
            
          

Skenaario 3: Suuret objektit, joilla on monia ominaisuuksia

Käsiteltäessä suuria objekteja, jotka sisältävät satoja tai tuhansia ominaisuuksia, suorituskykyerot voivat tulla selvemmiksi. Näissä tapauksissa spread-syntaksi säilyttää usein etunsa tehokkaamman muistinvarauksen ja ominaisuuksien kopioinnin ansiosta moottorin sisällä.

Benchmarkkaus

Tarkkojen suorituskykymittausten saamiseksi harkitse benchmarkkaustyökalujen, kuten Benchmark.js:n, käyttöä. Nämä työkalut mahdollistavat toistuvien testien suorittamisen ja tilastojen keräämisen sen määrittämiseksi, mikä menetelmä toimii parhaiten tietyissä olosuhteissa.

Esimerkki Benchmark.js:n avulla:

            const Benchmark = require('benchmark');

const suite = new Benchmark.Suite;

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { c: 3 };

// Lisää testit
suite.add('Spread Syntax', function() {
  const mergedSpread = { ...obj1, ...obj2, ...obj3 };
})
.add('Object.assign()', function() {
  const mergedAssign = Object.assign({}, obj1, obj2, obj3);
})
// Lisää kuuntelijat
.on('cycle', function(event) {
  console.log(String(event.target));
})
.on('complete', function() {
  console.log('Nopein on ' + this.filter('fastest').map('name'));
})
// Suorita asynkronisesti
.run({ 'async': true });

            

              
                Copy
              
            
          

Tämä koodinpätkä näyttää, kuinka suorituskyvyn benchmark-testi asetetaan Benchmark.js:llä vertaillaksesi spread-syntaksin ja Object.assign():n suorituskykyä useita objekteja yhdistettäessä. Muista asentaa kirjasto komennolla npm install benchmark ennen skriptin ajamista.

Käyttötapaukset

Vaikka suorituskyky on tekijä, valinta Object.assign():n ja spread-syntaksin välillä riippuu usein tietystä käyttötapauksesta ja koodaustyylin mieltymyksistä.

Object.assign()-metodin käyttötapaukset

• Kohdeobjektin muokkaaminen: Object.assign() muokkaa kohdeobjektia suoraan, mikä voi olla hyödyllistä, kun haluat päivittää olemassa olevan objektin paikan päällä.
• Yhteensopivuus vanhempien selaimien kanssa: Object.assign()-metodilla on laajempi selainten tuki verrattuna spread-syntaksiin, mikä tekee siitä sopivan projekteihin, jotka kohdistuvat vanhempiin ympäristöihin. Saatat tarvita polyfillin vanhemmille selaimille.
• Integrointi olemassa oleviin koodikantoihin: Jos työskentelet olemassa olevan koodikannan kanssa, joka käyttää laajasti Object.assign()-metodia, sen käytön jatkaminen voi ylläpitää johdonmukaisuutta ja vähentää bugien riskiä.
• Oletusarvojen asettaminen: Sitä voidaan käyttää oletusarvojen soveltamiseen objektiin, varmistaen, että tietyt ominaisuudet ovat aina määriteltyjä.

              const defaults = { a: 1, b: 2, c: 3 };
  const options = { a: 10, d: 4 };
  
  const config = Object.assign({}, defaults, options);
  console.log(config); // { a: 10, b: 2, c: 3, d: 4 }
  
              
  
                
                  Copy
                
              
            

Spread-syntaksin käyttötapaukset

• Uusien objektien luominen: Spread-syntaksi on erinomainen uusien objektien luomiseen muokkaamatta alkuperäisiä objekteja, mikä edistää muuttumattomuutta.
• Tiivis syntaksi: Spread-syntaksi johtaa usein luettavampaan ja tiiviimpään koodiin, erityisesti kun yhdistetään useita objekteja.
• React ja Redux: Reactissa ja Reduxissa, joissa muuttumattomuus on ratkaisevan tärkeää suorituskyvyn ja tilanhallinnan kannalta, spread-syntaksia käytetään laajalti tilan objektien päivitettyjen versioiden luomiseen.
• Funktionaalinen ohjelmointi: Se sopii hyvin funktionaalisen ohjelmoinnin periaatteisiin, joissa sivuvaikutusten välttämistä ja muuttumattoman datan kanssa työskentelyä kannustetaan.

Matala kopio vs. syvä kopio

On ratkaisevan tärkeää ymmärtää, että sekä Object.assign() että spread-syntaksi tekevät matalan kopion. Tämä tarkoittaa, että jos objekti sisältää sisäkkäisiä objekteja, vain viittaukset näihin sisäkkäisiin objekteihin kopioidaan, ei sisäkkäisiä objekteja itseään. Sisäkkäisen objektin muokkaaminen kopioidussa objektissa vaikuttaa myös alkuperäiseen objektiin ja päinvastoin.

Esimerkki:

            const original = {
  a: 1,
  b: { c: 2 }
};

const copied = { ...original };

copied.b.c = 3;

console.log(original.b.c); // 3 - Alkuperäinen objekti on muokattu!

            

              
                Copy
              
            
          

Jos sinun on luotava syvä kopio, jossa myös sisäkkäiset objektit kopioidaan, voit käyttää tekniikoita, kuten:

• JSON.parse(JSON.stringify(object)): Tämä on yksinkertainen, mutta mahdollisesti tehoton lähestymistapa, erityisesti suurille tai monimutkaisille objekteille. Se ei myöskään käsittele funktioita tai syklisiä viittauksia oikein.
• Kirjaston, kuten Lodashin _.cloneDeep(), käyttäminen: Kirjastot, kuten Lodash, tarjoavat optimoituja syväkloonaustoimintoja, jotka käsittelevät erilaisia reunatapauksia.
• Oman rekursiivisen syväkopiointifunktion kirjoittaminen: Tämä antaa sinulle hallinnan kloonausprosessiin ja mahdollistaa tiettyjen datatyyppien tai rakenteiden käsittelyn.

Muuttumattomuus

Muuttumattomuus on ohjelmointikonsepti, joka korostaa uusien tietorakenteiden luomista olemassa olevien muokkaamisen sijaan. Tämä lähestymistapa voi johtaa ennustettavampaan koodiin, helpompaan virheenkorjaukseen ja parantuneeseen suorituskykyyn tietyissä skenaarioissa. Sekä Object.assign()-metodia että spread-syntaksia voidaan käyttää muuttumattomuuden edistämiseen, mutta spread-syntaksi on yleensä suositeltavampi, koska se luo uusia objekteja suoremmin.

Object.assign()-metodin käyttäminen muuttumattomuuden saavuttamiseksi vaatii ensin uuden kohdeobjektin luomista:

            const original = { a: 1, b: 2 };
const updated = Object.assign({}, original, { a: 10 });

console.log(original); // { a: 1, b: 2 }
console.log(updated);  // { a: 10, b: 2 }

            

              
                Copy
              
            
          

            const original = { a: 1, b: 2 };
const updated = { ...original, a: 10 };

console.log(original); // { a: 1, b: 2 }
console.log(updated);  // { a: 10, b: 2 }

            

              
                Copy
              
            
          

Käytännön esimerkkejä

Esimerkki 1: Käyttäjäprofiilin tietojen päivittäminen

Kuvittele, että sinulla on käyttäjäprofiiliobjekti ja haluat päivittää sen uusilla tiedoilla lomakkeelta. Spread-syntaksia käyttämällä voit helposti luoda uuden objektin päivitetyillä tiedoilla:

            const userProfile = {
  id: 123,
  name: 'Alice',
  email: 'alice@example.com',
  location: 'New York'
};

const updatedData = {
  email: 'alice.new@example.com',
  location: 'London'
};

const updatedProfile = { ...userProfile, ...updatedData };

console.log(updatedProfile);
// {
//   id: 123,
//   name: 'Alice',
//   email: 'alice.new@example.com',
//   location: 'London'
// }

            

              
                Copy
              
            
          

Esimerkki 2: Ostoskorin tuotteiden hallinta

Verkkokauppasovelluksessa saatat joutua päivittämään tuotteen määrää ostoskorissa. Spread-syntaksia käyttämällä voit luoda uuden ostoskoritaulukon päivitetyllä tuotteella:

            const cart = [
  { id: 1, name: 'Product A', quantity: 2 },
  { id: 2, name: 'Product B', quantity: 1 }
];

const productIdToUpdate = 1;
const newQuantity = 3;

const updatedCart = cart.map(item =>
  item.id === productIdToUpdate ? { ...item, quantity: newQuantity } : item
);

console.log(updatedCart);
// [
//   { id: 1, name: 'Product A', quantity: 3 },
//   { id: 2, name: 'Product B', quantity: 1 }
// ]

            

              
                Copy
              
            
          

Esimerkki 3: Sovelluksen asetusten määrittäminen

Kun määrität sovelluksen asetuksia, saatat haluta yhdistää oletusasetukset käyttäjän antamiin asetuksiin. Object.assign() voi olla hyödyllinen tähän tarkoitukseen, varsinkin jos sinun on muokattava oletusasetusobjektia suoraan:

            const defaultSettings = {
  theme: 'light',
  fontSize: 'medium',
  language: 'en'
};

const userSettings = {
  theme: 'dark',
  fontSize: 'large'
};

Object.assign(defaultSettings, userSettings);

console.log(defaultSettings);
// {
//   theme: 'dark',
//   fontSize: 'large',
//   language: 'en'
// }

            

              
                Copy
              
            
          

Tässä tapauksessa defaultSettings-objektia muokataan paikan päällä, mikä voi olla toivottavaa tai ei, riippuen sovelluksesi vaatimuksista.

Parhaat käytännöt

• Ymmärrä matala kopiointi: Ole tietoinen, että molemmat menetelmät tekevät matalia kopioita. Syväkopiointia varten käytä sopivia tekniikoita tai kirjastoja.
• Harkitse muuttumattomuutta: Suosi mahdollisuuksien mukaan spread-syntaksia uusien objektien luomiseen ja muuttumattomuuden edistämiseen.
• Benchmarkkaa tarvittaessa: Suorituskykykriittisessä koodissa benchmarkkaa molemmat menetelmät määrittääksesi nopeimman vaihtoehdon omaan käyttötapaukseesi.
• Valitse kontekstin perusteella: Valitse menetelmä, joka sopii parhaiten koodaustyyliisi, projektin vaatimuksiin ja yhteensopivuustarpeisiin.
• Käytä lintereitä ja koodityylioppaita: Varmista Object.assign():n ja spread-syntaksin johdonmukainen käyttö lintereiden ja koodityylioppaiden avulla.
• Dokumentoi valintasi: Dokumentoi selkeästi perustelusi valita toinen menetelmä toisen sijaan, erityisesti monimutkaisissa koodikannoissa.

Yhteenveto

Object.assign() ja spread-syntaksi ovat arvokkaita työkaluja objektien käsittelyyn JavaScriptissa. Vaikka spread-syntaksi tarjoaa usein hieman paremman suorituskyvyn ja edistää muuttumattomuutta, Object.assign() on edelleen relevantti olemassa olevien objektien muokkaamiseen ja yhteensopivuuden ylläpitämiseen vanhempien ympäristöjen kanssa. Kummankin menetelmän vivahteiden ymmärtäminen antaa sinun tehdä tietoon perustuvia päätöksiä ja kirjoittaa tehokkaampaa ja ylläpidettävämpää koodia.

Harkitsemalla tässä artikkelissa esitettyjä suorituskykyominaisuuksia, käyttötapauksia ja parhaita käytäntöjä voit tehokkaasti hyödyntää sekä Object.assign()-metodia että spread-syntaksia parantaaksesi JavaScript-kehitystyönkulkuasi ja rakentaaksesi vakaita ja skaalautuvia sovelluksia maailmanlaajuiselle yleisölle. Muista aina priorisoida koodin selkeyttä ja ylläpidettävyyttä samalla kun optimoit suorituskykyä tarvittaessa. Koodin mikro-benchmarkkaus ja profilointi voivat myös auttaa sinua tunnistamaan suorituskyvyn pullonkauloja ja tekemään dataan perustuvia päätöksiä siitä, kumpaa menetelmää käyttää tietyissä skenaarioissa.